<template>
  <el-dialog width="1200px" :title="$t('m.packaging.detail')" :visible.sync="dialogVisible" :before-close="close">
    <!-- tool start -->
    <el-form size="mini" label-width="120px">
      <el-row>
        <el-col :span="8">
          <el-form-item :label="$t('m.in.ordernumber')">
            <el-input maxlength="20" show-word-limit v-model="detail.ordercode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.storeordercode')">
            <el-input maxlength="20" show-word-limit v-model="detail.storeordercode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.shopname')">
            <el-input maxlength="20" show-word-limit v-model="detail.shopname" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.tsareaid')">
            <el-input maxlength="20" show-word-limit v-model="detail.tsareacode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.packaging.couriernumber')">
            <el-input maxlength="20" show-word-limit v-model="detail.quantity" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.packaging.expresscode')">
            <el-input maxlength="20" show-word-limit v-model="detail.expresscode" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col v-if="this.$route.name === 'packaging'" :span="8">
          <el-form-item :label="$t('m.packaging.status')">
            <el-input maxlength="20" show-word-limit v-model="status" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.stock.creator')">
            <el-input maxlength="20" show-word-limit v-model="detail.modifier" disabled></el-input>
          </el-form-item>
        </el-col>
        <el-col :span="8">
          <el-form-item :label="$t('m.out.handletime')">
            <el-input maxlength="20" show-word-limit v-model="modifydateComputed" disabled></el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <!-- tool end -->
    <el-divider></el-divider>
    <!-- table数据展示 start -->
    <el-row>
      <el-col :span="24">
        <el-table
          ref="table"
          empty-text
          fit
          :data="tableData">
          <el-table-column align="center" type="index" :label="$t('m.index')" width="50"></el-table-column>
          <el-table-column align="center" prop="subordercode" :label="$t('m.packaging.trackingcode')"></el-table-column>
          <el-table-column align="center" prop="packagename" :label="$t('m.packaging.packagename')"></el-table-column>
          <el-table-column align="center" prop="length" :label="$t('m.packaging.length')"></el-table-column>
          <el-table-column align="center" prop="width" :label="$t('m.packaging.width')"></el-table-column>
          <el-table-column align="center" prop="height" :label="$t('m.packaging.height')"></el-table-column>
          <el-table-column v-if="this.$route.name === 'packagingHistory'" align="center" :label="$t('m.operation')">
            <template slot-scope="scope">
              <el-button type="text" @click="print(scope.row)">{{$t('m.print')}}</el-button>
            </template>
          </el-table-column>
        </el-table>
      </el-col>
    </el-row>
    <!-- table数据展示 end -->
    <el-row>
      <el-button @click="close">{{$t('m.close')}}</el-button>
    </el-row>
  </el-dialog>
</template>
<script>
import common from '@/utils/common'
export default {
  name:'packaging-details-popup',
  props:['dialogVisible','detail'],
  data(){
    return {
      tableData:[]
    }
  },
  computed:{
    status(){
      return this.detail.waybillstatus === 1? this.$t('m.packaging.applied'):this.$t('m.packaging.notapplied')
    },
    modifydateComputed:{
      get(){
        return common.timestampToTime(this.detail.modifydate)
      }
    }
  },
  mounted(){
    // this.tableData.push(this.detail)
    this.tableData = this.detail.packagingSubOrderVoList
    // console.log(this.$route)
  },
  components:{

  },
  methods:{
    print(row){
      let printId = row.packagingsuborderid
      this.$emit('print',printId)
    },
    close(){
      this.$emit('close')
    }
  }
}
</script>
<style lang="scss" scoped>
.el-divider__text{font-size: 18px;}
</style>